<template>
  <div class="pageone">
    <h3>store的简单应用</h3>
    <p>{{res}}</p>
    <button type="submit" @click="increase">增加</button>
    <button type="submit" @click="decrease">减少</button>
    <div class="input-demo">
      <span>请输入您的手机号：</span>
      <input class="input" required><a class="clear"></a>
    </div>
    <div class="demo">这是一个测试</div>
    <!-- <input class="input" required><a class="clear"></a> -->
  </div>
</template>

<script>
export default {
  name: 'PageOne',
  data () {
    return {
      num: 2,
      showPicker: false
    }
  },
  components: {
  },
  computed: {
    res () {
      return this.$store.getters.getResult
    }
  },
  methods: {
    increase () {
      this.$store.dispatch('increase', this.num)
    },
    decrease () {
      this.$store.dispatch('decrease', this.num)
    }
  }
}
</script>

<style scoped>
.input-demo {
  margin-top: 30px;
}
/* .phoneNumber:after {
  content:'X';
  font-size: 15px;
} */
.demo:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid #AFABAB;
    position: relative;
    top: 2px;
    left: 10px;
}
.input {
  padding: 10px; margin: 0; border: 1px solid #beceeb;
}
.clear {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 6 0 0 -20px;
  background: url('../assets/imgs/close.png');
}
.input::-ms-clear {
  display: none;
}
.input:valid + .clear {
  display: inline;
}
</style>
